{% extends "auth-menu.html" %}
{% block head %}

{#    时间范围控件#}
<link rel="stylesheet" type="text/css" media="all" href="/bootstrap/daterangepicker/daterangepicker-bs3.css"/>
<script type="text/javascript" src="/bootstrap/daterangepicker/jquery.min.js"></script>
{#<script type="text/javascript" src="/bootstrap/daterangepicker/bootstrap.min.js"></script>#}
<script type="text/javascript" src="/bootstrap/daterangepicker/moment.js"></script>
<script type="text/javascript" src="/bootstrap/daterangepicker/daterangepicker.js"></script>


{% endblock %}

{% block display2 %}
    "display: block"
{% endblock %}

{% block active2 %}
    'active'
{% endblock %}

{% block active_sub_fault_total %}
    'active'
{% endblock %}

{% block main %}


<form accept-charset="UTF-8" class="navbar-search pull-left hidden-phone" method="get" />
    <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
     时间区间：
                    <div class='input-append'>
               <span class="add-on input-group-addon">
              <i class='icon-calendar'></i>
               </span>
               <input type="text" readonly="readonly" style="width: 180px" name="scope" id="reservation" class="form-control" value="{{ startdate }} - {{ enddate }}" />

                    </div>
                &nbsp&nbsp
              故障类型：
                        <select id='inputSelect' style="width: 150px" name="type">
                                {% for i in type_list %}
                                    <option {{ i.select }}/>{{ i.type }}
                                {% endfor %}
                        </select>
     &nbsp&nbsp<input id='inlineCheckbox1' type='checkbox' name='month_select' value='month' {{ checked }} />    月报

    <button class="btn btn-link icon-search " name="button" type="submit"></button>

    <a class="icon-download" download={{ excelfile }} href='/bootstrap/tmp/{{ excelfile }}' ></a>&nbsp&nbsp&nbsp&nbsp


{#<input autocomplete="off" class="search-query span2" id="q_header" name="q" placeholder="Search..." type="text" value="" />#}
</form>

           <script type="text/javascript">
               $(document).ready(function() {
                  $('#reservation').daterangepicker({
                          "startDate": {{ startdate }},
                        "endDate": {{ enddate }}
                          },
                          function(start, end, label) {
                    console.log(start.toISOString(), end.toISOString(), label);
                  });
               });
               </script>

<div class='row-fluid'>
<div class='span12 box bordered-box orange-border' style='margin-bottom:0;'>
<div class='box-header orange-background'>

    <div class='title'>{{ startdate }} 至 {{ enddate }} {{ type_str }}</div>

    <div class='actions'>
        <a href="#" class="btn box-remove btn-mini btn-link"><i class='icon-remove'></i>
        </a>
        <a href="#" class="btn box-collapse btn-mini btn-link"><i></i>
        </a>
    </div>
</div>
<div class='box-content box-no-padding'>
<div class='responsive-table'>
<div class='scrollable-area'>
<table class='data-table table table-bordered table-striped' style='margin-bottom:0px;'>
{#<table class="table table-striped table-bordered table-hover datatable" style='margin-bottom:0px;'>#}
<thead>
<tr>
 {% for i in table_header %}
     <th  class="sorting_asc" aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width: 240px;" colspan="1" rowspan="1" aria-controls="DataTables_Table_0" tabindex="0" role="columnheader" class="sorting_asc">{{ i }}</th>
{% endfor %}
</tr>
</thead>
<tbody>

{% for row in data_list %}
    <tr>

    {% for field in row %}

        <td>{{ field|escape|default:"(N/A)" }}</td>

    {% endfor %}
    </tr>
{% endfor %}





</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<hr class='hr-double' />

</div>
</div>
</div>
</section>
</div>
{% endblock %}

{% block script %}

{#表格JS#}
<script src='/bootstrap/assets/javascripts/plugins/datatables/jquery.dataTables.min.js' type='text/javascript'></script>
<script src='/bootstrap/assets/javascripts/plugins/datatables/jquery.dataTables.columnFilter.js' type='text/javascript'></script>

<script src='/bootstrap/assets/javascripts/plugins/common/bootstrap-wysihtml5.js' type='text/javascript'></script>

<!-- / naked password -->
<script src='/bootstrap/assets/javascripts/plugins/naked_password/naked_password-0.2.4.min.js' type='text/javascript'></script>
<!-- / nestable -->
<script src='/bootstrap/assets/javascripts/plugins/nestable/jquery.nestable.js' type='text/javascript'></script>
{#<!-- / tabdrop -->#}
<script src='/bootstrap/assets/javascripts/plugins/tabdrop/bootstrap-tabdrop.js' type='text/javascript'></script>

<script src='/bootstrap/assets/javascripts/tables.js' type='text/javascript'></script>
<!-- / max length -->
<script src='/bootstrap/assets/javascripts/plugins/bootstrap_maxlength/bootstrap-maxlength.min.js' type='text/javascript'></script>
<!-- / timeago -->
<script src='/bootstrap/assets/javascripts/plugins/timeago/jquery.timeago.js' type='text/javascript'></script>

<!-- / autosize (for textareas) -->
<script src='/bootstrap/assets/javascripts/plugins/autosize/jquery.autosize-min.js' type='text/javascript'></script>
<!-- / charCount -->
<script src='/bootstrap/assets/javascripts/plugins/charCount/charCount.js' type='text/javascript'></script>




{#时间范围控件#}
{#<script type="text/javascript" src="/bootstrap/daterangepicker/jquery.min.js"></script>#}
{#<script type="text/javascript" src="/bootstrap/daterangepicker/bootstrap.min.js"></script>#}
<script type="text/javascript" src="/bootstrap/daterangepicker/moment.js"></script>
<script type="text/javascript" src="/bootstrap/daterangepicker/daterangepicker.js"></script>


{% endblock %}
